<template>
    <div class="index">
        <div class="banner">
            <div class="bannerItem">
                <img :src="banner.img_src" class="img" alt="">
            </div>
        </div>
        <div class="insprationCardList">
            <div class="insprationCardItem" v-for="(item,index) in goods" :key="index">
                <div class="itemImg" :style="{'background-image':`url(${item.cover})`}">
                    <!-- <img :src="item.cover" class="img" alt=""> -->
                </div>
                <div class="itemContTxt">
                    <h3 class="h3Txt">{{item.goods_name}}</h3>
                    <span class="imgBox iconfont iconfanhuizuojiantou" @click="$navTo('/home/BuyProduct?id='+item.id)"></span>
                </div>
            </div>
        </div>
        <div class="ad">
            <img src="https://www.ikea.cn/images/0b/6d/0b6d2ee97e8a64a3148cd88a08d8229f.jpg?f=xxl" class="img" alt="">
            <div class="adCont">
                <div class="adTxt">xxxxxxxxxxxxxxxxx</div>
                <a href="javascript:;" class="details">了解详情</a> 
            </div>
        </div>
        <div class="gallery-box">
            <div class="gallery-left"  v-if="recommend.length >= 1">
                <img :src="recommend[0].cover" class="img" alt="">
                <div class="txt">{{ recommend[0].goods_name }}<span class="imgBox iconfont iconfanhuizuojiantou" @click="$navTo('/home/BuyProduct?id='+recommend[0].id)"></span></div>
            </div>
            <div class="gallery-center">
                <div class="item" v-if="recommend.length >= 2">
                    <img :src="recommend[1].cover" class="img" alt="">
                    <div class="txt">
                        {{ recommend[1].goods_name }}<span class="imgBox iconfont iconfanhuizuojiantou" @click="$navTo('/home/BuyProduct?id='+recommend[1].id)"></span>
                    </div>
                </div>
                <div class="item" v-if="recommend.length >= 3">
                    <img :src="recommend[2].cover" class="img" alt="">
                    <div class="txt">
                        {{ recommend[2].goods_name }}<span class="imgBox iconfont iconfanhuizuojiantou" @click="$navTo('/home/BuyProduct?id='+recommend[2].id)"></span>
                    </div>
                </div>
            </div>
            <div class="gallery-right">
                <div class="item" v-if="recommend.length >= 4">
                    <img :src="recommend[3].cover" class="img" alt="">
                    <div class="txt">
                        {{ recommend[3].goods_name }}<span class="imgBox iconfont iconfanhuizuojiantou" @click="$navTo('/home/BuyProduct?id='+recommend[3].id)"></span>
                    </div>
                </div>
                <div class="item" v-if="recommend.length >= 5">
                    <img :src="recommend[4].cover" class="img" alt="">
                    <div class="txt">
                        {{ recommend[4].goods_name }}<span class="imgBox iconfont iconfanhuizuojiantou" @click="$navTo('/home/BuyProduct?id='+recommend[4].id)"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import request from "../../utils/request";
export default{
    data(){
        return{
            banner:{img_src:''},
            goods:[{cover:'',goods_name:'',id:null}],
            recommend:[
                {cover:'',goods_name:'',id:null},
                {cover:'',goods_name:'',id:null},
                {cover:'',goods_name:'',id:null},
                {cover:'',goods_name:'',id:null},
                {cover:'',goods_name:'',id:null},
                ]
        }
    },
    created (){
        this.getAll()
    },
    methods:{
        getAll(){
            request.post('/index/index').then(res=>{
                this.banner = res.data.banner[0]
                this.goods = res.data.goods
                this.recommend = res.data.recommend
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.index{
     .imgBox{
         cursor: pointer;
        display: inline-block;
        width: 40px;
        height: 40px;
        background: #fff;
        color: #000;
        font-size: 20px;
        border-radius: 50%;
        line-height: 40px;
        text-align: center;
        font-weight: 600;
        transform: rotate(180deg);
        transition: all 0.4s;
        &:hover{
            background:rgba($color: #FFF, $alpha: 0.5);
            color: #FFF;
        }
    }

    .img{
        width: 100%;
        height: 100%;
    }
    .banner{
        height: 520px;
        width: 100%;
        .bannerItem{
            width: 100%;
            height: 100%;
        }
        .img{
            width: 100%;
            height: 100%;
        }
    }
    .insprationCardList{
        padding-top: 40px;
        display: flex;
        .insprationCardItem{
            flex: 1;
            font-size: 0;
            margin-right: 15px;
            &:last-child{
                margin-right: 0;
            }
            .itemImg{
                height: 500px;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .itemContTxt{
                padding: 30px;
                background: #0077c8;
                color: #fff;
                &.itemContTxt2{
                    background: #896b4f;
                }
                &.itemContTxt3{
                    background: #e42312;
                }
                .h3Txt{
                    font-size: 24px;
                    margin-top: 0;
                    margin-bottom: 50px;
                }
               
            }
        }
    }
    .ad{
        margin-top: 50px;
        height: 280px;
        position: relative;
        .img{
            width: 100%;
            height: 100%;
        }
        .adCont{
            width: 150px;
            position: absolute;
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
            right: 50px;
            font-size: 24px;
            color: #000;
            background: none;
            .adTxt{
                word-break: break-all;
                text-align: left;
            }
        }
        .details{
            display: inline-block;
            height: 30px;
            padding: 0 20px;
            background: #fff;
            font-size: 14px;
            color: #000;
            line-height: 30px;
            text-decoration: none;
            border-radius: 15px;
            margin-top: 30px;
        }
    }
    .gallery-box{
        margin-top: 50px;
        display: flex;
        .gallery-left{
            width: 50%; 
            margin-right: 15px;
            position: relative;
        }
        .gallery-center{
            width: 25%;
            font-size: 0;
            margin-right: 15px;
            flex-flow: column;
            .item{
                position: relative;
                &:first-child{
                    height: 45%;
                    margin-bottom: 15px;
                }
                &:last-child{
                    flex: 1;
                    height: calc(55% - 15px);
                }
            }
        }
        .gallery-right{
            width: 25%;
            font-size: 0;
            .item{
                position: relative;
                &:first-child{
                    height: 55%;
                    margin-bottom: 15px;
                }
                &:last-child{
                    height: calc(45% - 15px);
                }
            }
        }
        .txt{
            position: absolute;
            bottom: 10px;
            padding: 0 20px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: right;
            font-size: 24px !important;
            color: #fff;
            .imgBox{
                margin-left: 10px;
            }
        }
    }
}
</style>